<template>
  <view class="container">
    <form @submit="submit">
      <view class="apply-row uni-column">
        <view class="h6">问题类型</view>
        <view class="apply-wrap" >
          <radio-group class="garmin" name="checkbox" @change="radioChange" >
            <label>
              <radio value="1" :checked="formObj.feedbackType === '1'" /><text class="label-item">功能异常</text>
            </label>
            <label>
              <radio value="2" :checked="formObj.feedbackType === '2'"/><text class="label-item">产品体验</text>
            </label>
            <label>
              <radio value="3" :checked="formObj.feedbackType === '3'"/><text class="label-item">新功能建议</text>
            </label>
            <label>
              <radio value="4" :checked="formObj.feedbackType === '4'"/><text class="label-item">其它</text>
            </label>
          </radio-group>
        </view>
      </view>

      <view class="apply-row uni-column">
        <view class="h6">问题描述</view>
        <view class="apply-wrap" >
          <textarea class="input-bg" v-model="formObj.feedbackContent" placeholder="内容" cols="30" rows="10"></textarea>
        </view>
      </view>

      <view class="apply-row uni-column">
        <view class="h6">联系方式</view>
        <view class="apply-wrap" >
          <input class="input-bg" v-model="formObj.contactInfo" placeholder="手机/qq/微信" />
        </view>
      </view>

      <view class="apply-row">
        <view class="h6">图片上传<=3(更新：限3张图片)</view>
        <view class="apply-wrap" >
          <view class="apply-img" v-for="(img,k) in imgArr" :key="k" @click="chooseImgs(3)">
            <view class="imgs"  >
              <image class="up-img" :src="img" mode=""></image>
              <image src="/static/icon/icon_delect11.png" @click.stop="imgArr.splice(k,1)" class="close-icon" mode=""></image>
            </view>
          </view>
          <view v-if="imgArr.length < 3" class="apply-img" @click="chooseImgs(3)">
            <view  class="add-img" >
              <image src="/static/icon/add_icon_01.png" class="add-icon" mode=""></image>
              <text>上传图片</text>
            </view>
          </view>
        </view>
      </view>


      <view class="apply-row">
        <button form-type="submit" class="button-c" @click="submit">提交</button>
      </view>
    </form>
  </view>
</template>

<script>
import { apiroot } from '@/siteInfo.js'
export default {
  name: "complaint",
  data(){
    return {
      flag: false,
      imgArr: [],
      formObj: {
        images: '', // 图片
        feedbackType: '1', // 投诉类型 [ 1 功能异常 2 体验问题 3 新功能建议 4 其他 ]
        feedbackContent: '', // 内容
        contactInfo: '', // 联系方式 手机/qq/微信
      },
    }
  },
  methods:{
    radioChange: function(evt) {
      const {detail:{value}} = evt
      this.feedbackType = value;

    },
    chooseImgs(type){
      var that = this;
      let count = type == 3?3:1;
      uni.chooseImage({
        count:type == 3?count - that.imgArr.length:count,
        success: (filePaths) => {
          console.log(filePaths)
          var imgArr = filePaths.tempFilePaths;
          let index = 0;
          let length = filePaths.tempFilePaths.length;
          downImgs();
          function downImgs(){
            that.$Request.upload({
              url: '/api/barter/uploadImg',
              filePath: imgArr[index],
              formData: null,
              name: 'headPic',
              success: (res)=>{
                // console.log(res)
                let data = JSON.parse(res.data)
                let imgSrc =  apiroot +'/'+ data.path;
                console.log(imgSrc)
                console.log(type)
                if(type ==3){
                  that.imgArr.push(imgSrc)
                }
                index++;
                index < length && downImgs();
              },
              fail:err=>{
                that.$api.msg('上传失败')
              }
            })
          }
          // return false;
        },
        fail:err=>{
          that.$api.msg('上传失败')
        }
      });
    },
    handleCheck(){
      if(!this.formObj.feedbackType){
        return this.$api.msg('请选择投诉类型')
      }
      if(!this.formObj.feedbackContent){
        return this.$api.msg('请填写内容')
      }
      if(!this.formObj.contactInfo){
        return this.$api.msg('请填写联系方式')
      }

      return true;
    },
    submit() {
      if(this.handleCheck() !== true || this.flag){
        return false;
      }
      this.flag = true;
      this.formObj.images = this.imgArr.join(',')
      // console.log(JSON.stringify(this.formObj))
      this.$Request.request('/api/feedback/add', 'POST', this.formObj).then(async (res) => {
        if(res.status == 1){
          this.$api.msg(res.msg)
          await setTimeout(()=>{
            // uni.navigateBack({
            //   delta: 1
            // })
          },2000)
          this.flag = false;
        }else {
          this.flag = false;
          this.$api.msg(res.msg)
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.uni-radio{
  width: 20rpx!important;
  height: 30rpx!important;
}
.container{
  padding: 20rpx 30rpx;

  .label-item{
    font-size: 28rpx;
    margin-right: 20rpx;
  }
  .input-bg{
    background: rgba(240, 240, 240, 1);
    width: 100%;
    padding: 20rpx 20rpx;
    min-height: 40rpx;
    box-sizing: content-box;
    color: #6e6e6e;
  }
  .apply-row {
    padding-top: 36rpx;
    .h6 {
      font-size: 28rpx;
      color: #92969E;
      line-height: 34rpx;
      margin-bottom: 22rpx;
    }
    .apply-in {
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #EFEFEF;
      input {
        font-size: 30rpx;
        color: #1D1E22;
      }
    }

    .apply-wrap {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      .apply-img {
        margin-right: 24rpx;
      }
    }

    .apply-img {
      width: 176rpx;
      height: 176rpx;
      border: 2rpx dashed #C0BEB9;
      .add-img {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 24rpx;
        color: #C0BEB9;
        background: rgba(240, 240, 240, 1);

        .add-icon {
          width: 52rpx;
          height: 52rpx;
          margin-bottom: 16rpx;
        }
      }
      .imgs {
        width: 100%;
        height: 100%;
        padding: 12rpx;
        box-sizing: border-box;
        position: relative;
        .up-img {
          width: 100%;
          height: 100%;
        }
        .close-icon {
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          top: -20rpx;
          right: -20rpx;
        }
      }
    }
  }
  .button-c{
    background: rgb(238, 91, 37);
    color: white;
  }

  /deep/.uni-radio-input {
    width: 32rpx!important;
    height: 32rpx!important;
  }
}
</style>
